/**
 * @Author: jipeng.Li
 * @Date: 2021-04-20 14:00:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-20 18:36:21
 * @Description: 核销记录
 */

import React, { Component } from 'react';
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { msg } from '@/common';
import { fontColorBlack, fontColorCoffee, mainBgColorLightGray, px2dp } from '@/styles';
import { empty02 } from '@/image';
import oil from '@/api/oil';
import tool from '@/common/utils/getDate';
import WriteOffRecordItem from './components/write-off-record-item';
import EmptyPage from '../../../components/EmptyPage';
import XmList from '../../../components/XmList';

export default class WriteOffRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      writeOffRecordList: [],
      pageNo: 1,
      pageSize: 15,
      isLoading: false,
      showFoot: 1, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
    };
  }

  componentDidMount() {
    this.loadData();
  }

  render() {
    const { writeOffRecordList, isLoading, showFoot } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <XmList
          sources={writeOffRecordList}
          renderItem={this._renderItem}
          style={styles.xmListContainer}
          isLoading={isLoading}
          onDropdownRefresh={this.loadData}
          onPullUpMore={this.LoadMore}
          singleKey={item => `writeOffRecordList${item.id}`}
          showFoot={showFoot}
          customEmptyView={<EmptyPage emptyIcon={empty02} noText='~' />}
        />
      </SafeAreaView>
    );
  }

  _renderItem = ({ item }) => {
    let writeOffData = {
      加油金额: <Text style={{ color: fontColorCoffee, fontSize: px2dp(28) }}>{`￥${item.writeOffAmount}`}</Text>,
      加油升数: <Text style={{ color: fontColorBlack }}>{`${item.writeOffAmount} / 升`}</Text>,
      加油枪号: <Text style={{ color: fontColorBlack }}>{`${item.gunNo}号`}</Text>,
      车牌号码: <Text style={{ color: fontColorBlack }}>{`${item.carNo || ''}`}</Text>,
    };
    if (item.refundTime) {
      writeOffData['退款时间'] = <Text style={{ color: fontColorBlack }}>{`${item.refundTime}`}</Text>;
    }
    return (
      <TouchableOpacity
        activeOpacity={0.8}
        style={{ marginTop: px2dp(30) }}
        onPress={() => {
          msg.emit('router: goToNext', {
            routeName: 'WriteOffDetails',
            pumpOilNo: item.pumpOilNo,
            backRouteName: 'WriteOffRecord',
          });
        }}
      >
        <WriteOffRecordItem
          time={tool.dateForm(item.writeOffTime, 'yyyy.MM.dd hh:mm:ss')}
          writeOffState={item.writeOffStatus}
          lineText={writeOffData}
        />
      </TouchableOpacity>
    );
  }

  // 下拉刷新
  loadData = () => {
    this.setState({
      isLoading: true,
      pageNo: 1,
      writeOffRecordList: [],
      showFoot: 0
    }, () => {
      this.pageVerificationDetail('pullDown');
    });
  }

  // 上拉加载更多
  LoadMore = () => {
    this.setState({ showFoot: 2 }, () => {
      this.pageVerificationDetail('pullUp');
    });
  }

  pageVerificationDetail = (type) => {
    const { pageNo, pageSize, writeOffRecordList } = this.state;
    let newWriteOffRecordList = [];
    oil.pageVerificationDetail({ pageNo: pageNo, pageSize }).then(res => {
      if (res.success) {
        const { records, pages } = res.data;
        if (type === 'pullDown') {
          this.setState({ writeOffRecordList: records });
        }
        if (type === 'pullUp') {
          if (pageNo > pages) {
            this.setState({ showFoot: 1 });
            return;
          }
          newWriteOffRecordList = [...writeOffRecordList, ...records];
          this.setState({ writeOffRecordList: newWriteOffRecordList });
        }
        this.setState({ isLoading: false, pageNo: pageNo + 1 });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  }
}

const styles = StyleSheet.create({
  xmListContainer: {
    backgroundColor: mainBgColorLightGray,
  },
});
